import type { questionComponentType, QuestionInputPropsType } from "@/utils/type";
import { Form, Input } from "antd";
import { useEffect } from "react";



type propsType = questionComponentType & {
  onChange: (value: QuestionInputPropsType) => void;
}



const InputPropComponent = (props: propsType ) => {
  const [form] = Form.useForm();
  const { title, placeholder } = props.props;

  const handleChange = () => {
    props.onChange(form.getFieldsValue())
  }

  useEffect(() => {
    form.setFieldsValue({ title, placeholder })
  }, [title, placeholder, form])

  return (
    <Form
      onValuesChange={handleChange}
      layout="vertical"
      initialValues={{ title, placeholder }}
      form={form}
      disabled={props.isLocked}
    >
      <Form.Item label={'标题：'} name="title" rules={[{ required: true, message: '请输入标题' }]}>
        <Input ></Input>
      </Form.Item>
      <Form.Item label={'placeholder:'} name="placeholder" rules={[{ required: true, message: '请输入placeholder' }]}>
        <Input ></Input>
      </Form.Item>
    </Form>
  )
}


export default InputPropComponent;